<script>
import draggable from 'vuedraggable';

export default {
  components: { draggable },
  name: 'InputTabs',
  props: {
    activeData: {
      type: Object,
    },
    renderChildren: {
      type: Function,
    },
  },
  data() {
    return {
      tab: 'mails',
      options: [],
    };
  },
  mounted() {
    this.options = this.activeData.options;
    if (this.options && this.options.length > 0) {
      this.tab = this.options[0].value;
    }
  },
  methods: {
  },
  computed: {
  },
  render(h) {
    const tabs = [];
    const panels = [];
    this.activeData.options.forEach((option) => {
      const child = this.renderChildren(h, { config: { children: option.children } });
      tabs.push(<q-tab name={option.value} label={option.label} />);
      panels.push(<q-tab-panel name={option.value} >
        <draggable group="componentsGroup" list={option.children} class="col row drag-wrapper">
          {child}
        </draggable>
      </q-tab-panel>);
    });
    return (<q-card>
      <q-tabs
        v-model={this.tab}
        dense
        class="text-grey"
        active-color="primary"
        indicator-color="primary"
        align="left"
        narrow-indicator
      >
      {tabs}
    </q-tabs>
      <q-separator />
      <q-tab-panels v-model={this.tab} animated>
        {panels}
      </q-tab-panels>
  </q-card>);
  },
};
</script>
